<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <link rel="stylesheet" type="text/css" href="/css/list.css" />
</head>
<body>
    <div class="left" id="left">
        <div class="left-top">ORDER聚造</div>
        <div class="left-title"><img src="/img/home.png">首页</div>
        <div class="left-title" id="left-title" @click="showtitle">
            <img src="/img/set_click.png">系统设置
            <img src="/img/jiantou.png"></div>
        <div v-for="item in list" v-if="show">
            <div class="left-text" >{{ item.text }}</div>
        </div>
    </div>  
    <div class="right">
        <div class="right-top">系统设置/人员管理</div>
        <div class="top-right">
            <img class="tx" src="/img/tx.png">
            <div style="color: #EAB924;">超级管理员</div>
            <div>小王，您好！</div>
            <button class="buto">退出</button>
        </div>
        <div class="right-center">
            <form>
                日期<input type="time" name="time" class="time" placeholder="请选择日期">
                <button class="search">搜索</button>
                <button class="delete">删除</button>
            </form>
        </div>
        <div class="right-body">
            <table rules="rows" class="table">
                <tr>
                  <td>日期</td>
                  <td>姓名</td>
                  <td>地址</td>
                </tr>
                <tr>
                  <td>2016-05-02</td>
                  <td>王小虎</td>
                  <td>上海市普陀区金沙江路1518弄</td>
                  <td><button class="search">修改</button></td>
                  <td><button class="delete">删除</button></td>
                </tr>
                <tr>
                    <td>2016-05-04</td>
                    <td>王小虎</td>
                    <td>上海市普陀区金沙江路1517弄</td>
                    <td><button class="search">修改</button></td>
                    <td><button class="delete">删除</button></td>
                  </tr>
                  <tr>
                    <td>2016-05-01</td>
                    <td>王小虎</td>
                    <td>上海市普陀区金沙江路1519弄</td>
                    <td><button class="search">修改</button></td>
                    <td><button class="delete">删除</button></td>
                  </tr>
                  <tr>
                    <td>2016-05-03</td>
                    <td>王小虎</td>
                    <td>上海市普陀区金沙江路1516弄</td>
                    <td><button class="search">修改</button></td>
                    <td><button class="delete">删除</button></td>
                  </tr>
              </table>
        </div>
        <div class="buttom-left">
            共400条<input type="text" name="pages" class="pages">
        </div>
        <div class="buttom-right">
            <text><     1   2   3   4   ></1></text>
            前往<input type="number" name="page" class="page">页
        </div>
    </div> 
</body>
</html>
<script>
    var left = new Vue({
        el:'#left',
        data:{
            list:[
                { text: '单位管理' },
                { text: '权限管理' },
                { text: '菜单管理' },
                { text: '人员管理' }
            ],
            show:false
        },
        methods:{
            showtitle:function(){
                this.show = !this.show
            }
        }
    })
</script>


